<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>由html5实现的文件上传预览功能</title>


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<!-- 上传组件 -->
<link rel="stylesheet" href="html5up/css/zyUpload.css" type="text/css">
<script src="html5up/js/zyFile.js"></script>
<script src="html5up/js/zyUpload.js"></script>

<!-- 预览组件 -->
<link rel="stylesheet" href="gallery/css/gallery.css" type="text/css">
<script src="gallery/js/gallery.js"></script>

</head>

<body>

<h1 style="text-align:center;">Html5 Upload示例</h1>
<div id="demo" class="demo"></div>
<div style="text-align:center;">zyUpload.js中引入图片路径问题,按照实际目录自行修改</div>


<h1 style="text-align:center;">Gallery 预览示例</h1>
<div id="gallery" class="gallery" style="text-align:center;">
	<a href="javascript:;" onclick="gallery('./images/mysql.png');">mysql.png</a>
    <a href="javascript:;" onclick="gallery('./images/nginx.png');">mysql.png</a>
</div>

<script type="text/javascript">
	 /* www.jq22.com */
$(function(){
	// 初始化插件
	$("#demo").zyUpload({
		width            :   "650px",                 // 宽度
		height           :   "400px",                 // 宽度
		itemWidth        :   "120px",                 // 文件项的宽度
		itemHeight       :   "100px",                 // 文件项的高度
		url              :   "http://localhost:8080/uploadFile",  // 上传文件的路径
		//removeUrl        :   "http://localhost:8080//deleteFile?fileId=",  // 上传文件的路径
		multiple         :   true,                    // 是否可以多个文件上传
	 	fileNum			 :   3,						  // 文件数量
        fileTypes        :  ["image/png"],            // 所有文件类型		
		del              :   true,                    // 是否可以删除文件
		dragDrop         :   false,  				  // 是否可以拖动上传文件
		debug            :   true,  				  // 是否在上传文件完成后删除预览
		// onInit:function(){
		// 	var initFiles = new Array(1);
		// 	var file={};
		// 	file.name="test.jpg"
		// 	file.type="image/png";
		// 	file.fileId="751d8a87-95b1-4cbb-b64c-94cfba26e128.png";
		// 	file.url="http://localhost:8080/image/751d8a87-95b1-4cbb-b64c-94cfba26e128.png";
		// 	initFiles[0]=file;
		// 	return initFiles;
		// },
		/* 外部获得的回调接口 */
		onSelect: function(files, allFiles){                    // 选择文件的回调方法
			console.info("当前选择了以下文件：");
			console.info(files);
			console.info("之前没上传的文件：");
			console.info(allFiles);
		},
		onDelete: function(file, surplusFiles){                     // 删除一个文件的回调方法
			console.info("当前删除了此文件：");
			console.info(file);
			console.info("当前剩余的文件：");
			console.info(surplusFiles);
		},
		onSuccess: function(file,response){                    // 文件上传成功的回调方法
			console.info("此文件上传成功：");
			console.info(response);
			file.remoteId=Math.random(1000);
			console.info(file);
		},
		onFailure: function(file,response){                    // 文件上传失败的回调方法
			console.info("此文件上传失败：");
			console.info(response);
			console.info(file);
		},
		onComplete: function(responseInfo){           // 上传完成的回调方法
			console.info("文件上传完成");
			console.info(responseInfo);
		}
	});
});

</script>
</html>